<template>
  <div class="container">
    <!-- 数据大屏展示内容区域 -->
    <div class="screen" ref="screenRef">
      <div class="top">
        <headerTop></headerTop>
        <div class="info">
          <ul class="info_img">
            <li v-if="dataStatus == 0">
              <img src="./images/red.png" alt="">
            </li>
            <li v-else>
              <img src="./images/green.png" alt="">
            </li>

            <li v-if="Object.keys(this.dataObj).length == 0">
              <img src="./images/yellow.png" alt="">
            </li>
            <li v-else>
              <img src="./images/green.png" alt="">
            </li>
          </ul>
          <!-- <div class="time">距离刷新还剩 {{remainingTime}} s</div> -->
        </div>
      </div>
      <div class="main">
        <div class="list left">
          <!-- 篮球馆 -->
          <div class="item">
            <contenBox :num="1" :item="dataObj['basketball']"></contenBox>
          </div>
          <!-- 羽毛球馆 -->
          <div class="item">
            <contenBox :num="2" :item="dataObj['badminton']"></contenBox>
          </div>
          <!-- 台球馆 -->
          <div class="item">
            <contenBox :num="3" :item="dataObj['billiards']"></contenBox>
          </div>
        </div>
        <div class="list mid">
          <div class="box">
            <stadium :item="dataObj['gym']"></stadium>
          </div>
          <!-- 乒乓球馆 -->
          <div class="item stadium-box">
            <contenBox :num="5" :item="dataObj['tabletennis']"></contenBox>
          </div>
        </div>
        <div class="list right">
          <!-- 多功能厅 -->
          <div class="item">
            <contenBox :num="6" :item="dataObj['multifunctional']"></contenBox>
          </div>
          <!-- 体操室 -->
          <div class="item">
            <contenBox :num="7" :item="dataObj['gymnastics']"></contenBox>
          </div>
          <!-- 器械馆 -->
          <div class="item">
            <contenBox :num="8" :item="dataObj['instrument']"></contenBox>
          </div>
        </div>  
      </div>
    </div>
  </div>
</template>
<script>
import { listQueryAllData } from '@/api/user'
import headerTop from "./component/header"
import contenBox from "./component/contenBox"
import stadium from "./component/stadium"
export default {
  name:'index',
  components: {
    headerTop,
    contenBox,
    stadium,
  },
  data() {
    return {
      currentTime:'',
      timer:'',
      screenRef:null,
      dataObj:{},
      dataStatus:0,
      remainingTime: 30, // 初始剩余时间为30秒
      countdownTimer: null,
    }
  },
  watch: {},
  computed: {
    day(){ // 显示 星期一...
      return this.dayjs().locale('zh-cn').format("dddd")
    },
    date(){ // 显示 2024年11月08日
      return this.dayjs().locale('zh-cn').format("YYYY年MM月DD日")
    }
  },
  created() {},
  mounted() {
    this.$refs.screenRef.style.transform = `scale(${this.getscale()}) translate(-50%,-50%)`
    //监听
    window.onresize = () => {
      this.$refs.screenRef.style.transform = `scale(${this.getscale()}) translate(-50%,-50%)`
    }

    /* 每秒定时刷新 */
    this.timer = setInterval(() => {
      this.currentTime = this.dayjs().format("HH:mm:ss") //format("YYYY-MM-DD HH:mm:ss")
    })

    this.init()

    // 初始化倒计时
    this.startCountdown()
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer);
    this.countdownTimer && clearInterval(this.countdownTimer);
  },
  methods:{
    init(){
      listQueryAllData().then(res=>{
        const { code,data,status,msg } = res
        if (code != 0) return this.$message.error(msg)
        this.dataObj = data
        this.dataStatus = status
        // badminton 羽毛球  0
        // basketball 篮球  1
        // billiards  台球 2
        // gym       体育房
        // gymnastics  体操
        // instrument  器械
        // multifunctional 多功能
        // tabletennis      乒乓球
      })
    },
    // 定义大屏缩放比例
    getscale(w = 1920, h = 1080) {
      const ww = window.innerWidth / w;
      const wh = window.innerHeight / h;
      return ww < wh ? ww : wh;
    },
    // 距离刷新时间还有30秒的方法
    startCountdown() {
      this.remainingTime = 30; // 重置剩余时间为30秒
      this.countdownTimer = setInterval(() => {
        if (this.remainingTime > 0) {
          this.remainingTime--;
          // 小于10以下 补0
          if (this.remainingTime < 10) {
            this.remainingTime = `0${this.remainingTime}`;
          }
        } else {
          clearInterval(this.countdownTimer);
          // 刷新数据
          this.init();
          // 重新开始倒计时
          this.startCountdown();
        }
      }, 1000);
    }
  }
}
</script>
<style scoped lang="scss">
.container {
  width: 100vw;
  height: 100vh;
  background: #02172a;

  .screen {
    position: fixed;
    width: 1920px;
    height: 1080px;
    background: url(./images/bg.jpg) no-repeat;
    background-size: 100% 100%;

    left: 50%;
    top: 50%;
    transform-origin: left top;
    // width: 100%;
    // height: 100%;
    .top {
      width: 100%;
      // height: 100px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .info{
        color: #fff;
        padding-top: 46px;
      }
    }
    .main{
      display: flex;
      justify-content: space-between;
      padding: 0 30px;
      .list{
        color: #fff;
        .item{
          width: 100%;
          height: 300px;
          margin-bottom: 20px;
        }
      }
      .left,.right{
        width: 30%;
      }
      .mid{
        width:40%;
        .box{
          height: 66.6%;
        }
      }
    }
  }
}
.stadium-box{
  padding: 0 36px;
}
.info{
  display: flex;
  flex-direction: column;
  align-items: center;
  .info_img{
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    li{
      width: 34px;
      height: 34px;
      list-style: none;
      margin-right: 10px;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  .time{
    font-size: 12px;
    margin-top: 10px;
    margin-right: 10px;
  }
}
</style>
